<template>
  <div class="upload-container">
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
      :limit="3"
      :show-file-list="false"
      :on-progress="uploadVideoProcess"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <!-- 进度条 -->
    <el-progress v-if="progressFlag" :percentage="loadProgress" :text-inside="true" :stroke-width="26" :format="setItemText()"/>

  </div>
</template>
<script>

export default {
  data() {
    return {
      loadProgress: 0, // 动态显示进度条
      itemText: '',
      progressFlag: false, // 关闭进度条}
      uploadSpeed: 0,
      uploadSpeedKb: 0,
      fileSizeMb: 0,
      form:{
        size: 0,
      }
    }
  },
  computed: {
    // 计算剩余时间
    planTimes() {
      console.log(222)
      const uploadSpeedKb = this.uploadSpeedKb
      const fileSizeMb = this.fileSizeMb
      console.log(uploadSpeedKb)
      console.log(fileSizeMb)
      const remainPackSize =
        (fileSizeMb - parseInt((this.loadProgress / 100) * fileSizeMb)) *
        1024
      const remainTime = parseInt(remainPackSize / uploadSpeedKb) // 秒
      if (remainTime < 60) {
        return remainTime + '秒'
      } else {
        var min_total = Math.floor(remainTime / 60) || 0 // 分钟
        var sec = Math.floor(remainTime % 60) || 0 // 余秒
        if (min_total < 60) {
          return min_total + '分钟' + sec + '秒'
        } else {
          var hour_total = Math.floor(min_total / 60) || 0 // 小时数
          var min = Math.floor(min_total % 60) || 0 // 余分钟
          return hour_total + '小时' + min + '分钟' + sec + '秒'
        }
      }
    }
  },

  methods: {
    // 自定义进度条文本
    setItemText() {
      return () => {
        return '完成度:' + this.loadProgress + '% ，剩余时间:' + this.planTimes
      }
    },
    // 上传显示进度条
    uploadVideoProcess(event, file, fileList) {
      console.log(file)
      this.progressFlag = true // 显示进度条
      this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
      this.httpUploadPack(file)
      if (this.loadProgress >= 100) {
        this.loadProgress = 100
        setTimeout(() => {
          this.progressFlag = false
        }, 10000) // 一秒后关闭进度条
      }
    },
    // 获取文件大小
    httpUploadPack(param) {
      this.$set(this.form, 'size', param.size)
      // 上传文件回调返回大小默认是kb 我们需要转成mb
      this.$set(this, 'fileSizeMb', parseInt(param.size / 1024 / 1024))
      this.onConnectionChange()
    },
    // 监控网速大小
    onConnectionChange() {
      console.log(33333)
      this.linkSpeedTimer = setInterval(() => {
        this.uploadSpeedKb = (navigator.connection.downlink * 1024) / 8
        this.uploadSpeed =
          (navigator.connection.downlink * 1024) / 8 > 1024
            ? (navigator.connection.downlink * 1024) / 8 / 1024 + 'm/s'
            : (navigator.connection.downlink * 1024) / 8 + 'kb/s'
        if (!this.progressLoad) {
          clearInterval(this.linkSpeedTimer)
        }
      }, 1000)
      console.log(this.uploadSpeed)
    }

  }
}
</script>
